// 工具类名统一前缀
$prefix: sy;
$--color-primary: #6269f6;

//滚动条的宽度
::-webkit-scrollbar {
  display: none;
  width: 7px;
  height: 7px;
  background-color: transparent;
}
//滚动条的滑块
::-webkit-scrollbar-thumb {
  background-color: #eceef2;
  border-radius: 5px;
}

// 定位相关
.#{$prefix}-pos-rel {
  position: relative;
}
.#{$prefix}-pos-abs {
  position: absolute;
}
.#{$prefix}-pos-fix {
  position: fixed;
}

// overflow
.#{$prefix}-of-h {
  overflow: hidden;
}
.#{$prefix}-ofy-auto {
  overflow-y: auto;
}
.#{$prefix}-ofx-auto {
  overflow-x: auto;
}

// text-align相关
.#{$prefix}-ta-c {
  text-align: center;
}

// border border-radius相关
.#{$prefix}-b-none {
  border: none;
}
.#{$prefix}-outline {
  outline: none;
}

$borders: (left, right, top, bottom);
@each $i in $borders {
  .#{$prefix}-b-#{$i} {
    border-#{$i}: none !important;
  }

  // float text-align相关
  @if $i == "right" {
    .#{$prefix}-f-r {
      float: #{$i};
    }
    .#{$prefix}-ta-r {
      text-align: #{$i};
    }
  } @else if $i == "left" {
    .#{$prefix}-f-l {
      float: #{$i};
    }
    .#{$prefix}-ta-l {
      text-align: #{$i};
    }
  }
}

// display相关
$display: (flex, inline-block, inline, table, block, none);
@each $i in $display {
  .#{$prefix}-dis-#{$i} {
    display: #{$i};
  }
}

// 字体粗细相关
$fontWeight: (400, 500, 600, 700, bold);
@each $i in $fontWeight {
  .#{$prefix}-fw-#{$i} {
    font-weight: #{$i} !important;
  }
}

// 背景色、颜色、边框相关
$colors: (
  "000",
  333,
  666,
  999,
  fff,
  ccc,
  eee,
  ddd,
  fa,
  f2,
  b5,
  b8,
  75,
  9e,
  ea,
  e3,
  e7,
  bd,
  f9,
  f90,
  e5e6e7,
  3855B3,
  F5F6FA,
  E6E5EC,
  E51F89,
  181819,
  209114,
  E98F1C,
  25364E,
  f00,
  676a6c,
  6d7a94,
  dfe8f5,
  455971,
  7F8C9C,
  B3BCC1,
  2F3F72,
  DB1111,
  6D7A94,
  f5f6f8,
  e1e2e4,
  F2F3F8,
  e7eaec,
  BEBDC3,
  f56c6c,
  b9c1d2,
  d9edf7,
  31708f,
  e9eaed,
  DDDEE1,
  e2e3e8,
  E98F1C,
  0f9d58,
  ff9800,
  4285f4,
  db4437,
  606266,
  F6F9FA,
  c0c4cc
);
.#{$prefix}-c-default {
  color: $--color-primary;
}
.#{$prefix}-bg-default {
  background-color: $--color-primary;
}
.#{$prefix}-c-success {
  color: #30a22c;
}
.#{$prefix}-c-error {
  color: #eb6161;
}
.#{$prefix}-b-error {
  border: 1px solid #eb6161;
}

@each $i in $colors {
  @if str-length(#{$i}) == 2 {
    .#{$prefix}-c-#{$i} {
      color: #{"#"}#{$i}#{$i}#{$i};
    }
    .#{$prefix}-bg-#{$i} {
      background-color: #{"#"}#{$i}#{$i}#{$i};
    }
    .#{$prefix}-bt-#{$i} {
      border-top: 1px solid #{"#"}#{$i}#{$i}#{$i};
    }
    .#{$prefix}-bb-#{$i} {
      border-bottom: 1px solid #{"#"}#{$i}#{$i}#{$i};
    }
    .#{$prefix}-bl-#{$i} {
      border-left: 1px solid #{"#"}#{$i}#{$i}#{$i};
    }
    .#{$prefix}-br-#{$i} {
      border-right: 1px solid #{"#"}#{$i}#{$i}#{$i};
    }
    .#{$prefix}-b-#{$i} {
      border: 1px solid #{"#"}#{$i}#{$i}#{$i};
    }
  } @else {
    .#{$prefix}-c-#{$i} {
      color: #{"#"}#{$i};
    }
    .#{$prefix}-bg-#{$i} {
      background-color: #{"#"}#{$i};
    }
    .#{$prefix}-bt-#{$i} {
      border-top: 1px solid #{"#"}#{$i};
    }
    .#{$prefix}-bb-#{$i} {
      border-bottom: 1px solid #{"#"}#{$i};
    }
    .#{$prefix}-br-#{$i} {
      border-right: 1px solid #{"#"}#{$i};
    }
    .#{$prefix}-bl-#{$i} {
      border-left: 1px solid #{"#"}#{$i};
    }
    .#{$prefix}-b-#{$i} {
      border: 1px solid #{"#"}#{$i};
    }
  }
}

// 边距 | 宽高 | 旋转 | 透明度 | z-index | flex | text-ellipsis | 字体 | border-radius
@for $i from 0 through 160 {
  // 边距相关
  .#{$prefix}-m-#{$i} {
    margin: #{$i}px !important;
  }
  .#{$prefix}-mt-#{$i} {
    margin-top: #{$i}px !important;
  }
  .#{$prefix}-mr-#{$i} {
    margin-right: #{$i}px !important;
  }
  .#{$prefix}-mb-#{$i} {
    margin-bottom: #{$i}px !important;
  }
  .#{$prefix}-ml-#{$i} {
    margin-left: #{$i}px !important;
  }

  .#{$prefix}-p-#{$i} {
    padding: #{$i}px !important;
  }
  .#{$prefix}-pt-#{$i} {
    padding-top: #{$i}px !important;
  }
  .#{$prefix}-pr-#{$i} {
    padding-right: #{$i}px !important;
  }
  .#{$prefix}-pb-#{$i} {
    padding-bottom: #{$i}px !important;
  }
  .#{$prefix}-pl-#{$i} {
    padding-left: #{$i}px !important;
  }

  .#{$prefix}-top-#{$i} {
    top: #{$i}px;
  }
  .#{$prefix}-bottom-#{$i} {
    bottom: #{$i}px;
  }
  .#{$prefix}-left-#{$i} {
    left: #{$i}px;
  }
  .#{$prefix}-right-#{$i} {
    right: #{$i}px;
  }
  @if $i > 0 {
    .#{$prefix}-mlr-#{$i} {
      margin: 0 #{$i}px !important;
    }
    .#{$prefix}-mtb-#{$i} {
      margin: #{$i}px 0 !important;
    }

    .#{$prefix}-plr-#{$i} {
      padding: 0 #{$i}px !important;
    }
    .#{$prefix}-ptb-#{$i} {
      padding: #{$i}px 0 !important;
    }

    .#{$prefix}-w-calc-#{$i} {
      width: calc(100% - #{$i}px);
    }
    .#{$prefix}-h-calc-#{$i} {
      height: calc(100% - #{$i}px);
    }
  }
  // 宽、高度相关
  $wh: $i * 5;
  @if $wh > 100 {
    .#{$prefix}-w-#{$wh} {
      width: #{$wh}px !important;
    }
    .#{$prefix}-min-w-#{$wh} {
      min-width: #{$wh}px;
    }
    .#{$prefix}-max-w-#{$wh} {
      max-width: #{$wh}px;
    }
    .#{$prefix}-h-#{$wh} {
      height: #{$wh}px !important;
    }
    .#{$prefix}-min-h-#{$wh} {
      min-height: #{$wh}px;
    }
    .#{$prefix}-max-h-#{$wh} {
      max-height: #{$wh}px;
    }
  } @else if $wh > 0 {
    .#{$prefix}-w-#{$wh} {
      width: #{$wh}px !important;
    }
    .#{$prefix}-min-w-#{$wh} {
      min-width: #{$wh}px;
    }
    .#{$prefix}-max-w-#{$wh} {
      max-width: #{$wh}px;
    }
    .#{$prefix}-h-#{$wh} {
      height: #{$wh}px !important;
    }
    .#{$prefix}-min-h-#{$wh} {
      min-height: #{$wh}px;
    }
    .#{$prefix}-max-h-#{$wh} {
      max-height: #{$wh}px;
    }

    .#{$prefix}-w#{$wh} {
      width: #{$wh}#{"%"} !important;
    }
    .#{$prefix}-min-w#{$wh} {
      min-width: #{$wh}#{"%"};
    }
    .#{$prefix}-max-w#{$wh} {
      max-width: #{$wh}#{"%"};
    }
    .#{$prefix}-h#{$wh} {
      height: #{$wh}#{"%"} !important;
    }
    .#{$prefix}-min-h#{$wh} {
      min-height: #{$wh}#{"%"};
    }
    .#{$prefix}-max-h#{$wh} {
      max-height: #{$wh}#{"%"};
    }
  }
  // 旋转
  @if $wh <= 360 {
    .#{$prefix}-tf-r#{$wh} {
      transform: rotate(#{$wh}deg);
    }
  }

  @if $i <= 10 {
    // 透明度
    .#{$prefix}-oc-#{$i} {
      opacity: #{$i/10} !important;
    }
    // z-index
    .#{$prefix}-zi-#{$i} {
      z-index: #{$i};
    }

    .#{$prefix}-mouseHover-#{$i}:hover {
      cursor: pointer;
      opacity: #{$i/10};
    }

    @if $i > 0 {
      // 宽、高度相关
      .#{$prefix}-w-#{$i} {
        width: #{$i}px !important;
      }
      .#{$prefix}-h-#{$i} {
        height: #{$i}px !important;
      }
      // flex相关
      .#{$prefix}-flex-#{$i} {
        -webkit-flex: #{$i};
        -ms-flex: #{$i};
        flex: #{$i};
        -webkit-box-flex: #{$i};
        -moz-box-flex: #{$i};
      }
      // text-ellipsis相关
      .#{$prefix}-text-ellipsis#{$i} {
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: #{$i};
        line-clamp: #{$i};
        overflow: hidden;
        word-break: break-all;
      }
    }
  }
  // 字体大小、行高相关
  @if $i >= 12 {
    .#{$prefix}-fs-#{$i} {
      font-size: #{$i}px !important;
    }
    .#{$prefix}-lh-#{$i} {
      line-height: #{$i}px !important;
    }
  }
  // border-radius相关
  @if $i <= 25 {
    $br: $i * 2;
    @if $br <= 20 {
      .#{$prefix}-br-r#{$br} {
        border-radius: #{$br}px;
      }
      .#{$prefix}-b-tl-r#{$br} {
        border-top-left-radius: #{$br}px !important;
      }
      .#{$prefix}-b-tr-r#{$br} {
        border-top-right-radius: #{$br}px !important;
      }
      .#{$prefix}-b-bl-r#{$br} {
        border-bottom-left-radius: #{$br}px !important;
      }
      .#{$prefix}-b-br-r#{$br} {
        border-bottom-right-radius: #{$br}px !important;
      }
    } @else {
      .#{$prefix}-br-r#{$br} {
        border-radius: #{$br}#{"%"};
      }
      .#{$prefix}-b-tl-r#{$br} {
        border-top-left-radius: #{$br}#{"%"} !important;
      }
      .#{$prefix}-b-tr-r#{$br} {
        border-top-right-radius: #{$br}#{"%"} !important;
      }
      .#{$prefix}-b-bl-r#{$br} {
        border-bottom-left-radius: #{$br}#{"%"} !important;
      }
      .#{$prefix}-b-br-r#{$br} {
        border-bottom-right-radius: #{$br}#{"%"} !important;
      }
    }
  }
}

// flex相关
$flex: flex;
.#{$prefix}-fd-col {
  -webkit-#{$flex}-direction: column;
  #{$flex}-direction: column;
}
.#{$prefix}-#{$flex}-wrap {
  -webkit-#{$flex}-wrap: wrap;
  #{$flex}-wrap: wrap;
}
.#{$prefix}-jc-c {
  -webkit-justify-content: center;
  justify-content: center;
}
.#{$prefix}-jc-start {
  -webkit-justify-content: #{$flex}-start;
  justify-content: #{$flex}-start;
}
.#{$prefix}-jc-end {
  -webkit-justify-content: #{$flex}-end;
  justify-content: #{$flex}-end;
}
.#{$prefix}-jc-around {
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.#{$prefix}-jc-between {
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.#{$prefix}-ai-c {
  -webkit-align-items: center;
  align-items: center;
}
.#{$prefix}-ai-start {
  -webkit-align-items: #{$flex}-start;
  align-items: #{$flex}-start;
}
.#{$prefix}-ai-end {
  -webkit-align-items: #{$flex}-end;
  align-items: #{$flex}-end;
}

// word-wrap相关
.#{$prefix}-word-break {
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}

/* rules表单验证 */
.#{$prefix}-rules {
  position: relative;
  &::before {
    content: "*" !important;
    color: #eb6161;
    position: absolute;
    left: 0;
  }
}

// 鼠标移入
.#{$prefix}-mouseHandle {
  cursor: pointer;
}
.#{$prefix}-mouseHover:hover {
  color: $--color-primary !important;
  cursor: pointer;
  opacity: 0.85;
}

.#{$prefix}-mouseHoverA:hover {
  cursor: pointer !important;
  color: $--color-primary !important;
}
.#{$prefix}-mouseHover-error:hover {
  cursor: pointer !important;
  color: #ff6969 !important;
}
